<template>
 <a-card style="margin-bottom: 10px" size="small" :bordered="false">
   <a-flex>
     <span style="font-weight: bold">MQTT连接状态：</span>
     <a-tag :color="mqttStatus.isConnected?'green':'red'">{{ mqttStatus.isConnected ? '连接成功' : '异常' }}</a-tag>
   </a-flex>
 </a-card>
  <a-row gutter="16">
    <a-col :span="6">
      <a-descriptions size="small" :column="1" bordered>
        <a-descriptions-item label="mqtt服务地址">
          <a-input v-model:value="mqttConfig.mqttHost"></a-input>
        </a-descriptions-item>
        <a-descriptions-item label="客户端id前缀">
          <a-input v-model:value="mqttConfig.mqttClientId"></a-input>
        </a-descriptions-item>
        <a-descriptions-item label="用户名">
          <a-input v-model:value="mqttConfig.mqttUsername"></a-input>
        </a-descriptions-item>
        <a-descriptions-item label="密码">
          <a-input v-model:value="mqttConfig.mqttPassword"></a-input>
        </a-descriptions-item>
        <a-descriptions-item label="上传云端主题">
          <a-input v-model:value="mqttConfig.mqttUploadTopic"></a-input>
        </a-descriptions-item>
        <a-descriptions-item label="接收云端主题">
          <a-input v-model:value="mqttConfig.mqttReceivedTopic"></a-input>
        </a-descriptions-item>
      </a-descriptions>

      <a-card size="small" :bordered="false" >
        <a-flex justify="end">
          <a-button type="primary" ghost @click="save"> 保存</a-button>
        </a-flex>
      </a-card>
    </a-col>
  </a-row>
</template>
<script setup>

import {ref} from "vue";
import {baseRequest} from "@/utils/request.js";
import {message} from "ant-design-vue";

const mqttStatus = ref(false)
const mqttConfig = ref({})

const loadData = ()=>{
  baseRequest("/mqtt/status", {}).then(res => {
    mqttStatus.value = res.data.data
  })
  baseRequest("/config/get/mqtt", {}).then(res => {
    mqttConfig.value = res.data.data
  })
}
loadData()

const save = () => {
  baseRequest("/config/set/matt", mqttConfig.value, 'post').then(res => {
    if (res.data.code == 200) {
      message.success("保存成功，重启服务后生效")
    } else {
      message.error(res.data.message)
    }
  })
}
</script>

<style scoped>

</style>
